<template>
	<view class="container bg-main pos-r">
		<use-navbar title="登录"></use-navbar>
		<view class="padding-xl dflex-c dflex-flow-c">
			<!-- #ifndef MP -->
			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconshouji margin-right"></view>
				<view class="flex1 dflex">
					<input class="border-line padding-sm flex1" type="number" maxlength="11" focus="mobileFocus"
						v-model="mobile" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconmima margin-right"></view>
				<view class="flex1 dflex">
					<input class="border-line padding-sm flex1" type="password" focus="mobileFocus" v-model="password"
						placeholder="请输入密码" />
				</view>
			</view>
			<!-- <use-smscode class="w-full" type="login" :code-valid="codeValid" :mobile="mobile" @change="codeChange"
				@confirm="tologin" @sent="codeSent" @sendCode="verify"></use-smscode> -->
			<view class="w-full margin-top-xxl">
				<view class="dflex-b border-radius-lg">
					<view class="tac padding-tb-sm flex1 bg-base fs" @click="tologin">立即登录</view>
				</view>
			</view>
			<!-- 底部信息 -->
			<view class="footer" style="margin-top: 16px">
				<view>
					<view @click="toregister">新用户注册</view>
				</view>
				<view style="margin-left: 32%;">
					<view @click="toforget">忘记密码</view>
				</view>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import upgrade from '@/components/upgrade';
	import checkVersion from '@/uni_modules/uni-upgrade-center-app/utils/call-check-version'
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
	export default {
		data() {
			return {
				loginWay: 'pwd',
				agreement: true,
				agreementContent: '已阅读并同意',
				agreementDatas: [],
				ismp: false,
				platform: '',
				platform_name: '',
				platform_icon: '',

				env: {},

				mobile: '',
				password: '',
				code: '',
				codeValid: false
			};
		},
		computed: {
			...mapState(['member'])
		},

		onShow() {
			let _this = this;
			uni.getStorage({
				key: '__mobile',
				success(res) {
					_this.mobile = res.data || '';
				}
			});
			uni.getStorage({
				key: '__loginWay',
				success(res) {
					_this.loginWay = res.data || 'code';
				}
			})
			this.updateUpgrade()
		},
		onLoad() {

		},
		methods: {
			updateUpgrade() {
				// #ifdef APP-PLUS
				checkVersion().then(async (e) => {
					if (!e.result) {
						return;
					}

					const {
						code
					} = e.result;

					if (0 !== parseInt(code)) {
						checkUpdate();
					}
				});
				// #endif
			},
			...mapMutations(['login', 'logout', 'token']),
			loginWayChange(res) {
				this.loginWay = res;
			},
			codeChange(code) {
				this.code = code;
			},
			toAgreement() {
				this.agreement = !this.agreement;
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			toforget() {
				/* this.$api.msg('请联系管理员');
				return */
				// 忘记密码
				uni.navigateTo({
					url: '/pages/login/forgot-password'
				});
			},
			toregister() {
				// 注册页
				uni.navigateTo({
					url: '/pages/login/register'
				});
			},
			async tologin(type) {
				let _this = this;
				if (_this.is_login) return;

				if (!this.mobile) {
					this.$api.msg('请输入手机号');
					return;
				}

				let url = 'member/login';
				let data = {
					sharemid: uni.getStorageSync('__use_share_mid') || ''
				};
				if (this.loginWay == 'pwd') {
					if (!this.password) {
						this.$api.msg('请输入密码');
						return;
					}
					if (this.$api.trim(this.password).length < 4) {
						this.$api.msg('密码长度不能小于4位');
						return;
					}

					data.username = this.mobile;
					data.password = this.password;
				} else if (this.loginWay == 'code') {
					if (!this.code) {
						this.$api.msg('请输入验证码');
						return;
					}
					if (this.code.length != 6) {
						this.$api.msg('验证码错误');
						return;
					}

					url = 'member/loginBySms';
					data.mobile = this.mobile;
					data.code = this.code;
				}

				if (!this.agreement) {
					this.$api.msg(this.agreementContent);
					return;
				}

				uni.showLoading({
					title: '登录中'
				})

				this.$func.wmzmall
					.call(url, data)
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.setStorage({
								key: '__mobile',
								data: _this.mobile
							})
							uni.setStorage({
								key: '__loginWay',
								data: _this.loginWay
							})
							_this.login(res.datas);

							this.$api.msg('登录成功');
							if (_this.$api.pages().length > 1) {
								// 返回上一页
								uni.navigateBack({});
								return;
							}
							// 首页
							_this.$api.tohome();
							return;
						}
						this.$api.msg(res.msg);
					});
			},
			codeChange(code) {
				this.code = code;
			},
			codeSent(res) {
				if (!res.bound) {
					// #ifdef MP-WEIXIN
					const ltype = '__wmzmall_login_sms_' + this.mobile;
					uni.removeStorage({
						key: ltype
					});
					// #endif
				}
			},

			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			verify() {
				this.codeValid = false;
				if (!this.mobile) {
					this.$api.msg('请输入手机号');
					return false;
				}
				if (!/(^1[0-9][0-9]{9}$)/.test(this.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return false;
				}

				this.codeValid = true;
				return true;
			}
		}
	};
</script>

<style lang="scss">
	.headimg-box {
		image {
			width: 130rpx;
			height: 130rpx;
		}
	}

	.login-area {
		view {
			width: 25vw;
		}
	}

	.bind-area {
		width: 100vw;
		padding: 80rpx;
		padding-top: 100rpx;

		.field {
			background-color: #f5f5f5;

			textarea {
				height: 100rpx !important;
			}
		}
	}

	/* 底部 */
	.footer {
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 14px;
		color: #e7480e;
		height: 20px;
		line-height: 20px;
		width: 100%;
	}

	/* 底部 */
	.register_footer {
		margin-left: 74upx;
		width: 80%;
		margin-top: 32upx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: rgba(0, 0, 0, 0.7);
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 60upx;
		font-size: 40upx;
		color: #000000;
	}

	.footer text {
		font-size: 24upx;
		margin-left: 15upx;
		margin-right: 15upx;
	}
</style>